Vue Script-Setup

nicer Syntax for composition-api

learn vue script setup (opens new window)

data

instead of:

export default {
  setup() {
    const userName = ref('Maximilian');
    
    return { userName };
  }

use script setup:

<script setup>
import { ref } from 'vue';
const userName = ref('Maximilian');
</script>

methods

you can write regular functions -> return the function

   function setNewData() {
      user.age++;
    }

    return { user, setNewData };

<script setup>
import { reactive } from 'vue';

const user = reactive({
name: 'Max',
age: 31
});

function setNewData() {
user.age++;
}
</script>

props

use defineProps

<script setup>
import { computed, defineProps } from 'vue';

const props = defineProps(['firstName', 'lastName']);
const uName = computed(() => {
	return props.firstName + ' ' + props.lastName;
});
</script>

---

Emit

<script setup>
import { ref, defineEmits } from 'vue';

const name = ref('');
const emit = defineEmits(['formSubmitted']);

function onSubmit() {
  emit('formSubmitted', { name: name.value });
}
</script>

---

Example

<template>
  <button @click="$emit('change')">Click Me</button>
</template>
<script setup>
  import { defineProps, defineEmit, useContext } from 'vue'

  const props = defineProps({
    foo: String
  })
  const emit = defineEmit(['change', 'delete'])

  const { slots, attrs } = useContext()
</script>

---

Async

async script setup (opens new window)

---

Private properties with script setup

You can limit what properties are available when a component is accessed by $ref :

export default {
 expose: ['makeItPublic'],

data() { 
  return {
		privateData: 'Keep me a secret!', 
  };
},

computed: 
  { 
    makeItPublic() {
			return this.privateData.toUpperCase(); 
    },
	}, 
};

With only makeItPublic exposed, you can't access the privateData property through a $ref anymore:

this.$refs.component.privateData // Will always be undefined

If you're using